<template>
  <div :id="uid" :style="{ width: width, height: height }"></div>
</template>
<script>
/**
 * 速度仪表盘
 */
export default {
  name: 'SpeedGauge',
  props: {
    speed: {
      type: Number,
      default: 0
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    speedUnion: {
      type: String,
      default: 'km'
    },
    uid: {
      type: String,
      default: 'speed-gauge'
    }
  },
  data() {
    return {
      echartInstance: null
    };
  },
  computed: {
    speedUnioText() {
      return this.speedUnion === 'km' ? `{b|${this.speedUnion}/h}` : `{b|mph}`;
    },
    eOption() {
      return {
        series: [
          {
            type: 'gauge',
            name: 'Pressure',
            min: 0,
            max: 240,
            startAngle: 210,
            endAngle: -30,
            axisLine: {
              //外轮廓
              lineStyle: {
                width: 1,
                color: [
                  [this.speed / 240, '#0091F0'],
                  [1, '#C8C8C8']
                ]
              }
            },
            axisTick: {
              //刻度
              distance: -10,
              length: 5,
              splitNumber: 4,
              lineStyle: {
                //动态
                color: 'auto',
                width: 1
              }
            },
            splitLine: {
              //分割刻度
              length: 10,
              lineStyle: {
                color: '#C8C8C8',
                width: 1
              }
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false,
              showAbove: true,
              width: 2,
              itemStyle: {
                color: '#0091F0'
              },
              length: '70%'
              // offsetCenter: [20, '20%']
            },
            detail: {
              valueAnimation: true,
              formatter: [`{a|${this.speed.toFixed(1)}}`, this.speedUnioText].join(
                  '\n'
              ),
              color: '#000000',
              fontSize: 12,
              offsetCenter: [0, 5],
              rich: {
                a: {
                  color: '#0091F0',
                  fontSize: 18,
                  fontWeight: 'bold'
                },
                b: {
                  color: '#C8C8C8',
                  fontSize: 12
                }
              }
            },
            data: [
              {
                value: this.speed
              }
            ]
          }
        ]
      };
    }
  },
  watch: {
    uid(val, oVal) {
      if (val !== oVal) {
        this._init();
      }
    },
    eOption(){
      this.initSpeedGauge()
    }
  },
  mounted() {
    this.initSpeedGauge();
  },
  methods: {
    initSpeedGauge() {
      this.$nextTick(() => {
        if (document.getElementById(this.uid)) {
          let myChart = this.$echarts.init(document.getElementById(this.uid));
          this.echartInstance = myChart;
          myChart.setOption(this.eOption);
          myChart.resize();
        }
      });
    }
  }
};
</script>

